<template>
    <div class="property-form">
        <el-collapse v-model="activeNames">
            <!-- 添加一个新的折叠面板项 -->
            <el-collapse-item title="选择MCP服务" name="mcp" class="card-collapse-item">
                <el-form label-position="top" label-width="100px">
                    <el-select v-model="node.data.Id" placeholder="请选择MCP服务" style="width: 100%"
                        @change="handleMcpChange">
                        <el-option v-for="mcp in mcps" :key="mcp.value" :label="mcp.label" :value="mcp.value" />
                    </el-select>
                </el-form>
            </el-collapse-item>

            <!-- 输入输出 -->
            <el-collapse-item title="输入输出配置" name="io" class="card-collapse-item">
                <el-form label-position="top" label-width="100px">
                    <el-form-item label="输入字段">
                        <el-input v-model="node.data.inputField" placeholder="例如: input_text" />
                    </el-form-item>
                    <el-form-item label="输出字段">
                        <el-input v-model="node.data.outputField" placeholder="例如: output_text" />
                    </el-form-item>
                </el-form>
            </el-collapse-item>
        </el-collapse>

    </div>
</template>

<script setup lang="ts" name="ChatTemplateProperty">
import { defineProps, ref, inject, onMounted } from 'vue'
import type { Node } from '@vue-flow/core'
import type { FlowAPI, ModelType } from '@/types/types'

const props = defineProps<{
    node: Node
}>()

const flowAPI = inject<FlowAPI>('flowAPI')
const activeNames = ref(['mode', 'mcp', 'io'])

// 存储 MCP 列表和选中的 MCP ID
const mcps = ref<{ label: string; value: number }[]>([])
const loading = ref(false)

// 初始化时加载 MCP 列表
onMounted(async () => {
    await loadMcps()
})

const loadMcps = async () => {
    if (!flowAPI?.getMcpList) return

    loading.value = true
    try {
        const res = await flowAPI.getMcpList()
        if (res.code === 200 && Array.isArray(res.data)) {
            mcps.value = res.data
                .filter(mcp => mcp.Prompts && mcp.Prompts.length > 0)
                .map(mcp => ({
                    label: `${mcp.Name} (${mcp.McpType})`,
                    value: mcp.ID,
                }))
            mcps.value.unshift({
                label: '未设置',
                value: 0,
            })
        }
    } catch (err) {
        console.error('获取 MCP 列表失败:', err)
    } finally {
        loading.value = false
    }
}

const handleMcpChange = (selectedId: number) => {
    const selectedModel = mcps.value.find(opt => opt.value === selectedId)
    if (selectedModel) {
        props.node.data.mcpName = selectedModel.label // 设置模型名
        console.log("mcpNode:", props.node.data)
    }
}

</script>

<style scoped>
.property-form {
    width: 100%;
    padding: 10px;
}

.collapse-title {
    flex: 1;
    font-size: 14px;
}

.collapse-title.required::after {
    content: '* ';
    color: red;
    margin-right: 4px;
}


.card-collapse-item {
    background-color: #f7f9fc;
    /* 卡片背景色 */
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    margin-bottom: 16px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.card-collapse-item:hover {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.card-collapse-item ::v-deep(.el-collapse-item__header) {
    background-color: #eef2f6;
    font-weight: bold;
    padding-left: 12px;
    line-height: 32px;
    /* 默认可能是 40~48px，可调低 */
    min-height: 32px;
    /* 控制最小高度 */
    height: 32px;
    /* 固定高度 */
    border-bottom: none;
    transition: background-color 0.3s ease;
}

.card-collapse-item ::v-deep(.el-collapse-item__wrap) {
    border-top: none;
    padding: 16px;
    background-color: #ffffff;
}

/* 👇 关键：取消内容区域底部的 padding */
.card-collapse-item ::v-deep(.el-collapse-item__content) {
    padding-bottom: 0;
}

.el-form {
    margin-bottom: 10px;
    background-color: transparent;
}
</style>